
<template>
  <div>
    <s-form-table :fields="fields"
                  create
                  :createButtonClickHandler="add"
                  ref="table"
                  batchDelete
                  :batchDeleteHandler="batchDelete"
                  :transformParams="transformParams"
                  :getData="getData"
                  :columns="columns">
      <template #actions>
        <a-button size="large"
                  type="primary">下载</a-button>
      </template>
      <template slot="time" slot-scope="{ row }">
        {{ formatTime(row.created) }}
      </template>
      <template slot="row-actions"
                slot-scope="{ row }">
        <a-button type="link"
                  @click="seeDetail(row)">详情</a-button>
        <a-button type="link"
                  @click="edit(row)"
                  v-show="row.finishFlag == false">编辑</a-button>
        <a-popconfirm title="确定删除该菜品吗？"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm.stop="del(row)">
          <a-button type="link">删除</a-button>
        </a-popconfirm>
      </template>
    </s-form-table>
    <add-modal :detail="detail"
               :title="title"
               :refresh="refresh"
               :clearDetail="clearDetail"
               ref="addModal"></add-modal>
    <detail-modal :detail="detail"
                  ref="detailModal"></detail-modal>
  </div>
</template>

<script>
import SFormTable from "@/components/SFormTable";
import addModal from "./addModal";
import detailModal from "./detailModal";
import api from "@/util/api";
import moment from "moment";
import { message } from "ant-design-vue";
export default {
  components: {
    SFormTable,
    addModal,
    detailModal
  },
  filters: {},
  props: {},
  data () {
    return {
      detail: null,
      getUrl: "/api/your-api",
      title: "",
      fields: [
        {
          name: "status",
          placeholder: "请选择订单状态",
          type: "select",
          allowClear: false, // element的api， 框架都支持，这个是添加清空按钮, 用的ant design,一个道理，都支持 比如这个allowClear
          options: [
            {
              title: "未付款",
              value: 1
            },
            {
              title: "已付款",
              value: 2
            },
            {
              title: "已接单",
              value: 3
            },
            {
              title: "已发货",
              value: 4
            },
            {
              title: "已完成",
              value: 5
            },
            {
              title: "已取消",
              value: 7
            }
          ]
        },
        {
          name: "time",
          showTime: true,
          placeholder: ["开始时间", "结束时间"],
          type: "range"
        }
      ],
      columns: [
        {
          title: "订单ID",
          dataIndex: "orderId",
          width: "170px",
          fixed: "left",
          align: "center"
        },
        {
          title: "手机号码",
          dataIndex: "mobile",
          fixed: "left",
          width: "120px",
          align: "left"
        },
        {
          title: "总价",
          dataIndex: "totalMoney",
          width: "120px",
          align: "left"
        },
        {
          title: "状态",
          dataIndex: "status",
          width: "120px",
          align: "left",
        },
        {
          title: "备注",
          dataIndex: "remarks",
          width: "100px",
          align: "left"
        },
        {
          title: "创建日期",
          dataIndex: "created",
          slot: "time",
          align: "left"
        },
        {
          title: "更新日期",
          dataIndex: "updated",
          slot: "time",
          align: "left"
        },
        {
          title: "操作",
          dataIndex: "comments",
          align: "center",
          width: "200",
          type: "actions",
          fixed: "right"
        }
      ]
    };
  },
  watch: {
  },
  methods: {
    formatTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss")
    },
   getData (params) {
      return new Promise((resolve) => {
        api.get(`/api/order/getOrders`, { params }).then(res => {
          if (res && res.rows) {
            const transformedRows = res.rows.map(row => {
              let statusText = '';
              switch (row.status) {
                case 1:
                  statusText = '未付款';
                  break;
                case 2:
                  statusText = '已付款';
                  break;
                case 3:
                  statusText = '已接单';
                  break;
                case 4:
                  statusText = '已发货';
                  break;
                case 5:
                  statusText = '已完成';
                  break;
                case 7:
                  statusText = '已取消';
                  break;
                case 8:
                  statusText = '已取消';
                  break;  
                default:
                  statusText = row.status; 
                  break;
              }
              return {
                ...row,
                status: statusText
              };
            });
            resolve({
              page: {
                total: res.total
              },
              data: transformedRows
            });
          } else {
            resolve({
              page: {
                total: 0
              },
              data: []
            });
          }
        }).catch(error => {
          console.error('获取订单数据失败', error);
        });
      });
    },
    // 修改默认fields的参数（接口）
    transformParams (params) {
      params.rows = params.pageSize
      return params
    },
    refresh () {
      this.$refs.table.search();
    },
    edit (row) {
      this.getDetail(row);
      this.title = "编辑任务";
      this.$refs.addModal.visible = true;
    },
    del (row) {
      api.delete(`/api/cbb-hzz/patrol-task/${row.id}`).then(() => {
        message.success("删除成功");
        this.refresh();
      });
    },
    batchDelete (val) {
      console.log('批量删除', val);
    },
    add () {
      this.title = "新建任务";
      this.$refs.addModal.visible = true;
    },
    clearDetail () {
      this.detail = null;
    },
    getDetail (val) {
      api.get(`/api/cbb-hzz/patrol-task/${val.id}`).then(res => {
        this.detail = res;
      });
    },
    seeDetail (row) {
      this.getDetail(row);
      this.$refs.detailModal.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
